<template>
	<div>
		<h3>品牌管理</h3>
		<table>
			<thead>
				<tr>
					<th v-for="(value, key) in headInfo" :key="key">
						{{ value }}
					</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="item in data" :key="item.id">
					<td v-for="(value, key) in headInfo" :key="key" :class="{color: key === 'price' && item[key] >= 100}">
						{{ item[key] }}
					</td>
					<td @click="onDelete(item.id)">删除</td>
				</tr>
                <tr>
                    <td>统计</td>
                    <td>总价钱为：{{ getNum }}</td>
                    <td>平均价：{{ getAvg }}</td>
                </tr>
			</tbody>
		</table>
		<div class="add-content">
			<input type="text" placeholder="资产名称" v-model="msg" />
			<input type="text" placeholder="价格" v-model.number="price" />
			<div class="btn" @click="addContent">添加资产</div>
		</div>
	</div>
</template>
<script>
import Moment from "moment";
let idCounter = 1;
export default {
	data() {
		return {
			msg: "",
			price: "",
			headInfo: {
				id: "编号",
				name: "资产名称",
				price: "价格",
				creatTime: "创建时间",
			},
			data: [],
		};
	},
    // 无缓存
	methods: {
		addContent() {
			const date = Date.now();
			const res = {
				id: idCounter++,
				name: this.msg,
				price: this.price,
				creatTime: Moment().format("YYYY-MM-DD HH:mm:ss"),
			};
			this.data.push(res);
			
            this.msg = '';
            this.price = '';
		},
		onDelete(id) {
			this.data = this.data.filter((item) => item.id !== id);
		},
	},
    // 有缓存
    computed: {
        getNum () {
            return this.data.reduce((pre, current) => pre + current.price,0);
        },
        getAvg () {
            return this.getNum / (this.data.length || 1) ;
        },
    }
};
</script>
<style scoped>
    table {
        border-spacing: 0;
        border-top: 1px solid #eee;
        border-left: 1px solid #eee;
    }
    tbody {
        font-size: 8px;
    }
    th,
    td {
        width: 130px;
        height: 30px;
        border-right: 1px solid #eee;
        border-bottom: 1px solid #eee;
    }
    input {
        outline: none;
    }
    .add-content {
        margin-top: 12px;
        display: flex;
    }
    .btn {
        width: 100px;
        height: 30px;
        background-color: aqua;
        border-radius: 4px;
        line-height: 30px;
        text-align: center;
    }
    .color {
        color: red;
    }
</style>